<template>
  <el-container>
    <el-main style="background-color: #cceeff;height: 100%;width: 100%">
      <el-container style="height: 100%">
        <el-header style="height: 45px">
          <el-page-header @back="goBack(this.questionId)" :title="title" style="color: #4490f1"/>
        </el-header>
        <el-main style="background-color: rgba(255,255,255,0.7);">
          <el-table border stripe :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="提交编号" />
            <el-table-column prop="submitName" label="用户名" />
            <el-table-column prop="submitNick" label="昵称" />
            <el-table-column prop="titleId" label="题目编号" />
            <el-table-column prop="titleResult" label="结果" >
              <template #default="scope">
                <div class="sub-body" style="color: #4db3ff" @click="titleIdDetail(scope.row)">
                  {{ scope.row.titleResult }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="mem" label="内存/KiB" />
            <el-table-column prop="time" label="时间/ms" />
            <el-table-column prop="languageId" label="语言" />
            <el-table-column prop="titleTime" label="提交时间" />
          </el-table>
        </el-main>
        <el-footer style="background-color: rgba(255,255,255,0.7);height: 45px">
          <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[5, 10, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </el-footer>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "ProblemSubRecordsView",
  data(){
    return {
      search: '',
      currentPage: 1,
      pageSize: 10,
      total: 10,
      tableData: [],
      questionId: {},
      questionName: {},
    }
  },
  created() {
    this.questionId = this.$route.query.qid;
    this.load(this.questionName)
  },
  methods:{
    goBack(id) {
      this.$router.push({path: '/problemDetails', query: {qid: id}});
    },
    load(){
      request.get("/submitRecord/status", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.questionId
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    handleSizeChange(pageSize) { //改变当前每页的个数触发
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) { //改变当前页码触发
      this.currentPage = pageNum
      this.load()
    }
  }
}
</script>

<style scoped>
.el-button {
  margin: 10px 10px 10px 10px;
}
.el-header{
  height: 20px;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>